<template>
	<view class="">
		<view class="list flex" @click="goUserPage">
			<view class="list__left">
				<text class="list__left--icon">*</text>
				<text class="list__left--title">姓名：</text>
			</view>
			<view class="">{{user}}</view>
		</view>
		<view class="list flex">
			<view class="" style="flex: 1;display: flex;justify-content: space-between;align-items: center;padding: 0 20rpx;">
				<view class="">
					<u-icon name="arrow-left" size="25" @click="prev"></u-icon>
				</view>
				<view class="" @click="weekDateClick">
					<text>{{weekStart}}</text>
					<text style="margin: 0 10rpx;">~</text>
					<text>{{weekEnd}}</text>
					<text>（{{week}}周）</text>
				</view>
				<view class="">
					<u-icon name="arrow-right" size="25" @click="next"></u-icon>
				</view>
			</view>
		</view>
		<view class="card">
			<u-sticky>
				<view class="card__title">
					<view class="" style="display: flex;align-items: center;">
						<u-tabs :list="menu" @click="changeMenu"></u-tabs>
					</view>
					<view class="" style="margin-top: 10rpx;" v-show="menuIndex == 0">
						<u-line-progress :percentage="totalPercent" activeColor="#2979ff"></u-line-progress>
					</view>
				</view>
				
			</u-sticky>
			<view class="card__body">
				<view class="week-done" v-for="(item,index) in compWeek" :key="item.id" @click="goPage(item)">
					<view class="" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="" style="color: #aaa;font-size: 25rpx;">编号：{{item.pid}}</view>
						<view class="wc" style="color: #aaa;font-size: 25rpx;">{{item.wancheng}}</view>
						<view class="week-done__content--right">
							<view class="week-done__content--right-comment" @click="scrollToComment">
								<image style="width: 35rpx;height: 35rpx;" src="@/static/theme/default/home/comment/comment.png" mode=""></image>
								<view class="container__icon--num">{{item.ReplyCount == 0 ? '回复' : item.ReplyCount}}</view>
							</view>
							<view class="week-done__content--right-like" @click.stop="like(item)">
								<image src="@/static/theme/default/home/comment/dianzhan.png" mode="" v-if="!item.isCommentLike"></image>
								<image :class="['animated',(item.isCommentLike ? 'jackInTheBox' : '')]" src="@/static/theme/default/home/comment/dianzhan_active.png" mode="" v-else></image>
								<view class="" :style="{color: item.isCommentLike ? '#e16531' : ''}">{{setLikeNum(item)}}</view>
							</view>
						</view>
					</view>
					<view class="week-done__content" style="margin: 20rpx 0;">
						{{item.name}}
					</view>
					<view class="" style="display: flex;align-items: center;margin-top: 20rpx;">
						<view class="" style="display: flex;justify-content: space-between;flex: 1;">
							<view class="week-text" v-for="(v,i) in weeks" :style="{'background-color': formatWeek(i,item) ? '#36cfc9':'','color': formatWeek(i,item) ? '#000' : '#aaa'}">{{v}}</view>
						</view>
						<view class="" style="width: 200rpx;position: relative;margin-left: 100rpx;">
							<view class="" style="margin-left: 10rpx;font-size: 25rpx;color: #0050b3;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 9;">{{item.num}}%</view>
							<u-line-progress ref="lineProgress" :percentage="item.num" :showText="false" activeColor="skyblue"></u-line-progress>
						</view>
					</view>
				</view>
			</view>
			<no-data v-if="!compWeek.length"></no-data>
		</view>
		
		<datetime-picker ref="Date" type="date" :border="false" returnType="date" v-model="date" hide-second @change="confirmDate" />
	</view>
</template>

<script>
	import moment from 'moment'
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import { getWeekInYear2,getDateFromWeek } from '@/common/custom_util.js'
	import DatetimePicker from '@/components/custom/datetime-picker/uni-datetime-picker.vue'
	import NoData from '@/components/custom/no-data/no-data.vue'
	
	export default {
		components: {
			DatetimePicker,NoData
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				user: _data.localData('name'),
				navRight: '本周新增',
				weekStart: '',
				weekEnd: '',
				date: moment().format('YYYY-MM-DD'),
				list: [],
				currentWeek: [],//本周数据
				nextWeek: [],//下周数据
				week: -1,//周数
				weeks: ['一','二','三','四','五','六','日','加'],
				type: 0,
				totalPercent: 0,
				menu: [
					{
						name: '本周工作'
					},
					{
						name: '下周计划'
					}
				],
				menuIndex: 0,
				shadowStyle: {
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
					// #ifdef APP-NVUE
					// nvue上不支持设置复杂的backgroundImage属性
					backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
					// #endif
					paddingTop: "20px",
					marginTop: "-25px",
					zIndex: "9",
					height: '30px'
				},
			}
		},
		onLoad() {
			uni.$on('selected',v => {
				this.user = v.pname;
				this.getWeekReportList();
			})
			this.getWeekReportList();
		},
		onUnload() {
			uni.$off('selected')
		},
		computed: {
			compWeek() {
				switch(this.menuIndex) {
					case 0:
						return this.currentWeek;
						break;
					case 1:
						return this.nextWeek;
						break;
				}
			}
		},
		methods: {
			/**
			 * 获取用户最新一份周报列表数据
			 */
			getWeekReportList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getWeekReportList',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						rbuser: this.user,
					},
					success(res) {
						if(!res.length) {
							that.currentWeek = []
							that.nextWeek = []
							that.list = []
							that.totalPercent = 0;
							that.weekStart = moment().startOf('isoWeek').format('YYYY-MM-DD')
							that.weekEnd = moment().endOf('isoWeek').format('YYYY-MM-DD')
							that.week = getWeekInYear2(moment())
							return
						}
						that.weekStart = moment(res[0].rbdate).startOf('isoWeek').format('YYYY-MM-DD')
						that.weekEnd = moment(res[0].rbdate).endOf('isoWeek').format('YYYY-MM-DD')
						that.date = moment(res[0].rbdate).format('YYYY-MM-DD')
						that.week = res[0].flag;
						that.setDataList(res)
						that.list = res;
					}
				})
			},
			/**
			 * 根据周次获取周报列表数据
			 */
			getWeekReportListByFlag(v) {
				let that = this;
				_custom.getDataJava({
					apiname: 'getWeekReportListByFlag',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						rbuser: this.user,
						flag: this.week
					},
					success(res) {
						if(!res.length) {
							that.currentWeek = []
							that.nextWeek = []
							that.list = []
							that.totalPercent = 0;
						} else {
							that.setDataList(res)
							that.list = res;
						}
					}
				})
			},
			/**
			 * 根据日期获取周报列表数据
			 */
			getWeekReportListByDate() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getWeekReportListByDate',
					apiparam: {
						obsusername: this.obsusername,
						obspxid: this.pxid,
						rbuser: this.user,
						startdate: this.weekStart,
						enddate: this.weekEnd
					},
					success(res) {
						that.setDataList(res)
						that.list = res;
					}
				})
			},
			/**
			 * 创建主题点赞
			 */
			addTopicLikes(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicLikes',
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 筛选数据
			 * @param {Object} v
			 */
			setDataList(v) {
				let percent = 0;
				let currentWeek = [];
				let nextWeek = [];
				v.forEach(item => {
					item.name = item.name.replace(/%22/g,'"')
					let isCommentLike = item.MyLikesCount == '1' ? true : false;
					this.$set(item,'isCommentLike',isCommentLike)
					item.num = (parseFloat(item.gongzuoliang)*100).toFixed(0)
					if(item.pid && item.pid[0] == '1') {
						currentWeek.push(item)
					} else {
						nextWeek.push(item)
					}
				})
				currentWeek.forEach(item => {
					percent += item.gongzuoliang*100;
				})
				this.currentWeek = currentWeek;
				this.nextWeek = nextWeek;
				this.totalPercent = (percent).toFixed(0);
				setTimeout(() => {
					this.$nextTick(() => {
						for (let i = 0; i < this.$refs.lineProgress.length; i++) {
							this.$refs.lineProgress[i].init();
						}
					})
				},500)
				
			},
			/**
			 * 判断每周的日期
			 * @param {Object} index
			 * @param {Object} item
			 */
			formatWeek(index,item) {
				for(let i = 0;i < 8;i++) {
					if(item['a' + (i+1)] && index == i) {
						return true
					}
				}
				return false
			},
			/**
			 * 切换本周/下周
			 * @param {Object} e
			 */
			changeMenu(e) {
				this.menuIndex = e.index;
			},
			/**
			 * 前一周
			 */
			prev() {
				--this.week;
				if(this.week == 0) {
					let prevYear = moment(this.weekStart).subtract(1,'years').format('YYYY');
					let lastWeek = getWeekInYear2(prevYear + '-12-31');
					this.week = lastWeek;
					let dates = getDateFromWeek(prevYear,this.week)
					this.weekStart = dates[0]
					this.weekEnd = dates[1]
					
					this.date = this.weekStart
					this.getWeekReportListByFlag()
				}
				if(this.week == 1) {
					let dates = getDateFromWeek(moment(this.date).year(),1)
					let weekStart = dates[0]
					let weekEnd = dates[1]
					if(moment(weekStart).weekday() == 1 && moment(weekStart).year() == moment(weekEnd).year()) {//1号刚好为周一
						this.weekStart = weekStart
						this.weekEnd = weekEnd
						this.getWeekReportListByFlag()
						this.date = this.weekStart
					} else {
						let prevYear = moment(this.weekStart).subtract(1,'years').format('YYYY');
						let lastWeek = getWeekInYear2(prevYear + '-12-31');
						this.week = lastWeek;
						let d = getDateFromWeek(prevYear,this.week)
						this.weekStart = d[0]
						this.weekEnd = d[1]
						this.date = this.weekStart
						this.getWeekReportListByFlag()
					}
				} else {
					this.getWeekReportListByFlag()
					let dates = getDateFromWeek(moment(this.date).year(),this.week)
					this.weekStart = dates[0]
					this.weekEnd = dates[1]
					if(moment(this.weekStart).year() != moment(this.weekEnd).year()) {
						let lastWeek = getWeekInYear2(moment(this.weekStart).year() + '-12-31');
						this.week = lastWeek;
						let d = getDateFromWeek(moment(this.weekStart).year(),lastWeek);
						this.weekStart = d[0]
						this.weekEnd = d[1]
					}
					this.date = this.weekStart
				}
			},
			/**
			 * 后一周
			 */
			next() {
				let lastDate = moment(this.date).endOf('year').format("YYYY-MM-DD")
				let lastWeek = getWeekInYear2(lastDate);
				if(this.week == lastWeek) {
					let yearLastDate = moment(this.weekStart).year() + '-12-31';
					let nextYear = moment(this.weekStart).add(1,'years').format('YYYY');
					if(moment(yearLastDate).weekday() == 0) {//最后一天是否是周日
						this.week = 1;
					} else {
						this.week = 2;
					}
					let dates = getDateFromWeek(nextYear,this.week)
					this.weekStart = dates[0]
					this.weekEnd = dates[1]
					this.date = this.weekStart
				} else {
					++this.week;
					let dates = getDateFromWeek(moment(this.date).year(),this.week)
					this.weekStart = dates[0]
					this.weekEnd = dates[1]
					this.date = this.weekStart
				}
				this.getWeekReportListByFlag()
			},
			/**
			 * 确认日期
			 * @param {Object} e
			 */
			confirmDate(e) {
				this.weekStart = moment(e).startOf('isoWeek').format('YYYY-MM-DD')
				this.weekEnd = moment(e).endOf('isoWeek').format('YYYY-MM-DD')
				this.week = getWeekInYear2(moment(e).format('YYYY-MM-DD'));
				this.getWeekReportListByDate()
			},
			/**
			 * 点击日期范围文字
			 */
			weekDateClick() {
				this.$refs.Date.show()
			},
			/**
			 * 跳转组织机构选择页面
			 */
			goUserPage() {
				uni.navigateTo({
					url: './select'
				})
			},
			/**
			 * 跳转详情页
			 */
			goPage(v) {
				uni.navigateTo({
					url: './reply?businessId=' + v.id,
				})
			},
			/**
			 * 设置赞的数量
			 * @param {Object} v
			 */
			setLikeNum(v) {
				if(v.LikesCount != '0') return v.LikesCount
				if(v.LikesCount == '0') return '赞'
			},
			/**
			 * 点赞
			 * @param {Object} v
			 */
			like(v) {
				this.$set(v,'isCommentLike',!v.isCommentLike);
				let LikesCount = v.LikesCount*1;
				if(v.isCommentLike) {
					LikesCount = ++LikesCount;
				} else {
					LikesCount = --LikesCount;
				}
				let MyLikesCount = v.MyLikesCount == '1' ? '0' : '1';
				this.$set(v,'LikesCount',LikesCount);
				this.$set(v,'MyLikesCount',MyLikesCount);
				this.addTopicLikes({
					topicid: v.TopicId,
					topicrouter: 'week-report-view',
					businessid: v.id,
					owner: v.rbuser,
					ownerpxid: v.pxid,
					replyid: '',
					createuser: this.obsusername,
					createpxid: this.pxid,
					flag: v.isCommentLike ? 0 : 1,
				})
			},
			/**
			 * 滚动到评论区
			 */
			scrollToComment() {
				setTimeout(() => {
					uni.$emit('scrollToComment');
				},400)
			},
		}
	}
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}
	
	.list {
		height: 100rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		
		&__left {
			margin-left: 20rpx;
			margin-right: 10rpx;
			
			&--icon {
				color: red;
				margin-right: 5rpx;
			}
			
			&--title {
				font-size: 30rpx;
			}
		}
	}
	
	.card {
		
		&__title {
			background-color: #fff;
			font-weight: bold;
			border-bottom: 1rpx solid #eee;
			padding: 20rpx;
		}
	}
	
	
	
	.week-done {
		padding: 20rpx;
		position: relative;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		
		&__content {
			
			&--right {
				width: 210rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: #aaa;
				
				view {
					display: flex;
					align-items: center;
					font-size: 25rpx; 
					
					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
				
			}
		}
	}
	
	.week-text {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;
		font-size: 25rpx;
		text-align: center;
		line-height: 40rpx;
	}
	
	.nav-pop {
		width: 250rpx;
		height: 200rpx;
		background-color: #fff;
		position: fixed;
		top: 150rpx;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		right: 0;
		z-index: 9;
		
		&__item {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}
	}
	
	.wc {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0 40rpx;
	}
	
	.dates /deep/ uni-checkbox .uni-checkbox-input {
		margin-right: 0;
	}
	
	.week-done /deep/ .u-text__value {
		font-size: 25rpx !important;
	}
	
	.card /deep/ .u-sticky {
		z-index: 10 !important;
	}
</style>
